<template>
  <el-container>
    <el-main>
      <el-row :gutter="15" type="flex" justify="center">
        <el-col :span="1">

        </el-col>
        <el-col :span="4">
          <el-card class="box-card3" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>选择统计类型</b></span>
            </div>
            <el-table
              ref="typeTable"
              @selection-change="handleAnaTypeSelect"
              max-height="700"
              :data="countTypeData"
              stripe
              style="width: 100%; border-radius: 15px"
              border
              default-expand-all
            >
              <el-table-column prop="tag" label="统计方式" width="140">
              </el-table-column>
              <el-table-column
                :selectable="is_selectable"
                type="selection"
                label="选择"
                width="50"
              >
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
         <el-col :span="1">

        </el-col>
        <el-col :span="18">
          <el-card class="box-card3" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>分析结果</b></span>
            </div>
            <div id="china_map_box">
              <div id="china_map"></div>
            </div>
          </el-card>
        </el-col>

        <!-- <el-col :span="20">
          <el-card class="box-card3" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>分析类型</b></span>
            </div>
          </el-card>
        </el-col> -->
      </el-row>

      <!-- <el-row type="flex" justify="center">
        <el-col :span="20">
          <el-card class="box-card3" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>分析结果</b></span>
            </div>
            <div id="china_map_box">
              <div id="china_map"></div>
            </div>
          </el-card>
        </el-col>
      </el-row> -->
    </el-main>
  </el-container>
</template>

<script>
// import '../../utils/china.js'
import chinaJson from "../../utils/china.json";
import HK from "../../utils/HK.json";
export default {
  data() {
    return {
      countTypeData: [
        { tag: "年龄分布" },
        { tag: "消费能力分布" },
        { tag: "浏览时段分布" },
        { tag: "商品偏好" },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      options: {
        tooltip: {
          triggerOn: "mousemove", //mousemove、click
          padding: 8,
          borderWidth: 1,
          borderColor: "#409eff",
          backgroundColor: "rgba(255,255,255,0.7)",
          textStyle: {
            color: "#000000",
            fontSize: 13,
          },
          formatter: function (e, t, n) {
            let data = e.data;
            //模拟数据
            data.specialImportant = (Math.random() * 1000) | 0;
            data.import = (Math.random() * 1000) | 0;
            data.compare = (Math.random() * 1000) | 0;
            data.common = (Math.random() * 1000) | 0;
            data.specail = (Math.random() * 1000) | 0;

            let context = `
               <div>
                   <p><b style="font-size:15px;">${data.name}</b>(2020年第一季度)</p>
                   <p class="tooltip_style"><span class="tooltip_left">事件总数</span><span class="tooltip_right">${data.value}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">特别重大事件</span><span class="tooltip_right">${data.specialImportant}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">重大事件</span><span class="tooltip_right">${data.import}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">较大事件</span><span class="tooltip_right">${data.compare}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">一般事件</span><span class="tooltip_right">${data.common}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">特写事件</span><span class="tooltip_right">${data.specail}</span></p>
               </div>
            `;
            return context;
          },
        },
        visualMap: {
          show: true,
          left: 26,
          bottom: 40,
          showLabel: true,
          pieces: [
            {
              gte: 100,
              label: ">= 1000",
              color: "#1f307b",
            },
            {
              gte: 500,
              lt: 999,
              label: "500 - 999",
              color: "#3c57ce",
            },
            {
              gte: 100,
              lt: 499,
              label: "100 - 499",
              color: "#6f83db",
            },
            {
              gte: 10,
              lt: 99,
              label: "10 - 99",
              color: "#9face7",
            },
            {
              lt: 10,
              label: "<10",
              color: "#bcc5ee",
            },
          ],
        },
        geo: {
          map: "china",
          scaleLimit: {
            min: 1,
            max: 2,
          },
          zoom: 1,
          top: 120,
          label: {
            normal: {
              show: true,
              fontSize: "14",
              color: "rgba(0,0,0,0.7)",
            },
          },
          itemStyle: {
            normal: {
              //shadowBlur: 50,
              //shadowColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              areaColor: "#f2d5ad",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            name: "突发事件",
            type: "map",
            geoIndex: 0,
            data: [],
          },
        ],
      },
      options2: {
        title: {
          text: "省份数据统计分析",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c} (p / km2)",
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        visualMap: {
          min: 0,
          max: 1000,
          text: ["High", "Low"],
          realtime: false,
          calculable: true,
          // pieces: [
          //   {
          //     gte: 100,
          //     label: ">= 1000",
          //     color: "#1f307b"
          //   },
          //   {
          //     gte: 500,
          //     lt: 999,
          //     label: "500 - 999",
          //     color: "#3c57ce"
          //   },
          //   {
          //     gte: 100,
          //     lt:499,
          //     label: "100 - 499",
          //     color: "#6f83db"
          //   },
          //   {
          //     gte: 10,
          //     lt: 99,
          //     label: "10 - 99",
          //     color: "#9face7"
          //   },
          //   {
          //     lt:10,
          //     label:'<10',
          //     color: "#bcc5ee"
          //   }
          // ],
          inRange: {
            // color: ["lightskyblue", "yellow", "orangered"],
            color: ["lightskyblue", "#5076ee", "#031e9d"],
          },
        },
        series: [
          {
            name: "省份数据统计",
            type: "map",
            map: "china",
            label: {
              show: true,
            },
            data: [],
          },
        ],
      },
      options3: {
        title: {
          text: "Population Density of Hong Kong （2011）",
          subtext: "Data from Wikipedia",
          sublink:
            "http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c} (p / km2)",
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        visualMap: {
          min: 800,
          max: 50000,
          text: ["High", "Low"],
          realtime: false,
          calculable: true,
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"],
          },
        },
        series: [
          {
            name: "香港18区人口密度",
            type: "map",
            map: "HK",
            label: {
              show: true,
            },
            data: [
              { name: "中西区", value: 20057.34 },
              { name: "湾仔", value: 15477.48 },
              { name: "东区", value: 31686.1 },
              { name: "南区", value: 6992.6 },
              { name: "油尖旺", value: 44045.49 },
              { name: "深水埗", value: 40689.64 },
              { name: "九龙城", value: 37659.78 },
              { name: "黄大仙", value: 45180.97 },
              { name: "观塘", value: 55204.26 },
              { name: "葵青", value: 21900.9 },
              { name: "荃湾", value: 4918.26 },
              { name: "屯门", value: 5881.84 },
              { name: "元朗", value: 4178.01 },
              { name: "北区", value: 2227.92 },
              { name: "大埔", value: 2180.98 },
              { name: "沙田", value: 9172.94 },
              { name: "西贡", value: 3368 },
              { name: "离岛", value: 806.98 },
            ],
            // 自定义名称映射
            nameMap: {
              "Central and Western": "中西区",
              Eastern: "东区",
              Islands: "离岛",
              "Kowloon City": "九龙城",
              "Kwai Tsing": "葵青",
              "Kwun Tong": "观塘",
              North: "北区",
              "Sai Kung": "西贡",
              "Sha Tin": "沙田",
              "Sham Shui Po": "深水埗",
              Southern: "南区",
              "Tai Po": "大埔",
              "Tsuen Wan": "荃湾",
              "Tuen Mun": "屯门",
              "Wan Chai": "湾仔",
              "Wong Tai Sin": "黄大仙",
              "Yau Tsim Mong": "油尖旺",
              "Yuen Long": "元朗",
            },
          },
        ],
      },
      //echart data
      dataList: [
        {
          name: "南海诸岛",
          value: 100,
          eventTotal: 100,
          specialImportant: 10,
          import: 10,
          compare: 10,
          common: 40,
          specail: 20,
        },
        {
          name: "北京",
          value: 540,
        },
        {
          name: "天津",
          value: 130,
        },
        {
          name: "上海",
          value: 400,
        },
        {
          name: "重庆",
          value: 750,
        },
        {
          name: "河北",
          value: 130,
        },
        {
          name: "河南",
          value: 830,
        },
        {
          name: "云南",
          value: 110,
        },
        {
          name: "辽宁",
          value: 19,
        },
        {
          name: "黑龙江",
          value: 150,
        },
        {
          name: "湖南",
          value: 690,
        },
        {
          name: "安徽",
          value: 60,
        },
        {
          name: "山东",
          value: 39,
        },
        {
          name: "新疆",
          value: 4,
        },
        {
          name: "江苏",
          value: 31,
        },
        {
          name: "浙江",
          value: 104,
        },
        {
          name: "江西",
          value: 36,
        },
        {
          name: "湖北",
          value: 52,
        },
        {
          name: "广西",
          value: 33,
        },
        {
          name: "甘肃",
          value: 7,
        },
        {
          name: "山西",
          value: 5,
        },
        {
          name: "内蒙古",
          value: 778,
        },
        {
          name: "陕西",
          value: 22,
        },
        {
          name: "吉林",
          value: 4,
        },
        {
          name: "福建",
          value: 18,
        },
        {
          name: "贵州",
          value: 5,
        },
        {
          name: "广东",
          value: 98,
        },
        {
          name: "青海",
          value: 1,
        },
        {
          name: "西藏",
          value: 0,
        },
        {
          name: "四川",
          value: 44,
        },
        {
          name: "宁夏",
          value: 4,
        },
        {
          name: "海南",
          value: 22,
        },
        {
          name: "台湾",
          value: 3,
        },
        {
          name: "香港",
          value: 5,
        },
        {
          name: "澳门",
          value: 555,
        },
      ],
    };
  },
  created() {
    this.setEchartOption();
  },
  mounted() {
    // this.show();
    setTimeout(() => {
      this.initEchartMap();
    }, 200);
  },

  methods: {
    chooseUser(row) {
      console.log(row);
      this.user_choosed = row.id;
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },

    // 绘制echart
    initEchartMap() {
      let mapDiv = document.getElementById("china_map");
      let myChart = this.$echarts.init(mapDiv);
      myChart.setOption(this.options2);
    },
    //修改echart配制
    setEchartOption() {
      this.options2.series[0]["data"] = this.dataList;
      this.$echarts.registerMap("china", chinaJson);
      console.log("created---");
      console.log(this.$echarts.getMap(), "map");
    },
  },
};
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-row {
  margin-bottom: 20px;
}
.box-card3 {
  /* width: 1180px; */
  border-radius: 20px;
  margin: 15px auto;
}

#china_map_box {
  height: 100%;
  /* width: 1000px; */
  /* position: relative; */
  margin: 10px auto;
}
#china_map_box #china_map {
  height: 500px;
  width: 100%;
}
</style>